<template>
  <view class="booking-page">
    <!-- 服务信息 -->
    <view class="service-info">
      <view class="info-header">
        <text class="service-title">{{ serviceInfo.title }}</text>
        <view class="service-type">
          <u-tag 
            :text="serviceInfo.category" 
            type="warning"
            size="normal"
          ></u-tag>
        </view>
      </view>
      
      <view class="info-meta">
        <view class="meta-item">
          <u-icon name="user" size="14" color="#fa8c16"></u-icon>
          <text class="meta-text">{{ serviceInfo.provider }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="map-pin" size="14" color="#fa8c16"></u-icon>
          <text class="meta-text">{{ serviceInfo.location }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="wallet" size="14" color="#fa8c16"></u-icon>
          <text class="meta-text" :class="{ free: serviceInfo.price === 0 }">
            {{ serviceInfo.price === 0 ? '免费' : `¥${serviceInfo.price}` }}
          </text>
        </view>
      </view>
    </view>

    <!-- 预约表单 -->
    <view class="booking-form">
      <view class="form-section">
        <view class="section-title">
          <u-icon name="user" size="16" color="#fa8c16"></u-icon>
          <text class="title-text">联系信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">姓名 <text class="required">*</text></text>
            <u-input 
              v-model="formData.name"
              placeholder="请输入您的姓名"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">手机号 <text class="required">*</text></text>
            <u-input 
              v-model="formData.phone"
              placeholder="请输入您的手机号"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">服务地址 <text class="required">*</text></text>
            <u-input 
              v-model="formData.address"
              placeholder="请输入详细服务地址"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="calendar" size="16" color="#fa8c16"></u-icon>
          <text class="title-text">预约时间</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">服务日期 <text class="required">*</text></text>
            <u-datetime-picker 
              v-model="formData.serviceDate"
              mode="date"
              :min-date="minDate"
              :max-date="maxDate"
              placeholder="请选择服务日期"
            ></u-datetime-picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">服务时间 <text class="required">*</text></text>
            <view class="time-slots">
              <view 
                v-for="(slot, index) in timeSlots" 
                :key="index"
                class="time-slot"
                :class="{ active: formData.serviceTime === slot.value, disabled: slot.disabled }"
                @click="handleTimeSlotClick(slot)"
              >
                <text class="slot-text">{{ slot.label }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#fa8c16"></u-icon>
          <text class="title-text">服务需求</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">服务类型</text>
            <view class="service-types">
              <view 
                v-for="(type, index) in serviceTypes" 
                :key="index"
                class="service-type"
                :class="{ active: formData.serviceType === type.value }"
                @click="handleServiceTypeChange(type.value)"
              >
                <text class="type-text">{{ type.label }}</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">服务面积</text>
            <u-input 
              v-model="formData.area"
              placeholder="请输入服务面积（平方米）"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">特殊要求</text>
            <u-textarea 
              v-model="formData.requirements"
              placeholder="请输入特殊要求（选填）"
              :maxlength="200"
              :count="true"
              :border="false"
              bg-color="#f8f9fa"
            ></u-textarea>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="file-text" size="16" color="#fa8c16"></u-icon>
          <text class="title-text">服务须知</text>
        </view>
        
        <view class="notice-content">
          <view 
            v-for="(notice, index) in serviceNotices" 
            :key="index"
            class="notice-item"
          >
            <text class="notice-text">{{ notice }}</text>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="check-circle" size="16" color="#fa8c16"></u-icon>
          <text class="title-text">确认信息</text>
        </view>
        
        <view class="confirm-content">
          <view class="confirm-item">
            <u-checkbox 
              v-model="formData.agreeTerms"
              active-color="#fa8c16"
            ></u-checkbox>
            <text class="confirm-text">我已阅读并同意<text class="link-text" @click="handleViewTerms">《服务预约协议》</text></text>
          </view>
          
          <view class="confirm-item">
            <u-checkbox 
              v-model="formData.agreePrivacy"
              active-color="#fa8c16"
            ></u-checkbox>
            <text class="confirm-text">我已阅读并同意<text class="link-text" @click="handleViewPrivacy">《隐私政策》</text></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="price-info">
        <text class="price-label">预约费用：</text>
        <text class="price-value" :class="{ free: serviceInfo.price === 0 }">
          {{ serviceInfo.price === 0 ? '免费' : `¥${serviceInfo.price}` }}
        </text>
      </view>
      
      <view class="submit-btn" @click="handleSubmit">
        <text class="btn-text">确认预约</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 服务信息
const serviceInfo = reactive({
  id: 1,
  title: '家庭保洁服务',
  category: '家政服务',
  provider: '绿洁家政',
  location: '社区内',
  price: 80
})

// 表单数据
const formData = reactive({
  name: '',
  phone: '',
  address: '',
  serviceDate: '',
  serviceTime: '',
  serviceType: '',
  area: '',
  requirements: '',
  agreeTerms: false,
  agreePrivacy: false
})

// 日期范围
const minDate = ref(Date.now())
const maxDate = ref(Date.now() + 30 * 24 * 60 * 60 * 1000) // 30天后

// 时间段选项
const timeSlots = reactive([
  { label: '08:00-10:00', value: '08:00', disabled: false },
  { label: '10:00-12:00', value: '10:00', disabled: false },
  { label: '14:00-16:00', value: '14:00', disabled: false },
  { label: '16:00-18:00', value: '16:00', disabled: true },
  { label: '18:00-20:00', value: '18:00', disabled: true }
])

// 服务类型选项
const serviceTypes = reactive([
  { label: '标准清洁', value: 'standard' },
  { label: '深度清洁', value: 'deep' },
  { label: '开荒清洁', value: 'new' },
  { label: '定期清洁', value: 'regular' }
])

// 服务须知
const serviceNotices = reactive([
  '请提前24小时预约服务',
  '服务期间请确保家中有人',
  '贵重物品请提前收好',
  '如有特殊要求请提前说明',
  '服务不满意可申请重新服务'
])

// 时间段选择
const handleTimeSlotClick = (slot: any) => {
  if (slot.disabled) return
  formData.serviceTime = slot.value
}

// 服务类型选择
const handleServiceTypeChange = (value: string) => {
  formData.serviceType = value
}


// 查看协议
const handleViewTerms = () => {
  uni.navigateTo({
    url: '/pages/common/terms'
  })
}

// 查看隐私政策
const handleViewPrivacy = () => {
  uni.navigateTo({
    url: '/pages/common/privacy'
  })
}

// 表单验证
const validateForm = () => {
  if (!formData.name.trim()) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.phone.trim()) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return false
  }
  
  if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.address.trim()) {
    uni.showToast({
      title: '请输入服务地址',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.serviceDate) {
    uni.showToast({
      title: '请选择服务日期',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.serviceTime) {
    uni.showToast({
      title: '请选择服务时间',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreeTerms) {
    uni.showToast({
      title: '请同意服务预约协议',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreePrivacy) {
    uni.showToast({
      title: '请同意隐私政策',
      icon: 'none'
    })
    return false
  }
  
  return true
}

// 提交预约
const handleSubmit = () => {
  if (!validateForm()) {
    return
  }
  
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '预约成功',
      icon: 'success'
    })
    
    // 跳转到预约成功页面
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages/convenience-service/success?id=${serviceInfo.id}`
      })
    }, 1500)
  }, 2000)
}

// 页面加载
onMounted(() => {
  console.log('服务预约页面加载完成')
})
</script>

<style lang="scss" scoped>
.booking-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}


.service-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .service-title {
      flex: 1;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      margin-right: 20rpx;
    }
    
    .service-type {
      flex-shrink: 0;
    }
  }
  
  .info-meta {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .meta-text {
        font-size: 26rpx;
        color: #666;
        
        &.free {
          color: #52c41a;
        }
      }
    }
  }
}

.booking-form {
  .form-section {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      padding: 30rpx 30rpx 20rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .form-content {
      padding: 30rpx;
      
      .form-item {
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          
          .required {
            color: #ff4d4f;
          }
        }
        
        .time-slots {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16rpx;
          
          .time-slot {
            padding: 20rpx;
            border: 2rpx solid #d9d9d9;
            border-radius: 8rpx;
            text-align: center;
            transition: all 0.3s ease;
            
            &.active {
              border-color: #fa8c16;
              background-color: #fff7e6;
              
              .slot-text {
                color: #fa8c16;
              }
            }
            
            &.disabled {
              background-color: #f5f5f5;
              border-color: #f0f0f0;
              
              .slot-text {
                color: #ccc;
              }
            }
            
            .slot-text {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
        
        .service-types {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16rpx;
          
          .service-type {
            padding: 20rpx;
            border: 2rpx solid #d9d9d9;
            border-radius: 8rpx;
            text-align: center;
            transition: all 0.3s ease;
            
            &.active {
              border-color: #fa8c16;
              background-color: #fff7e6;
              
              .type-text {
                color: #fa8c16;
              }
            }
            
            .type-text {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
    
    .notice-content {
      padding: 30rpx;
      
      .notice-item {
        display: flex;
        align-items: flex-start;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .notice-text {
          flex: 1;
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
    
    .confirm-content {
      padding: 30rpx;
      
      .confirm-item {
        display: flex;
        align-items: flex-start;
        gap: 16rpx;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .confirm-text {
          flex: 1;
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
          
          .link-text {
            color: #fa8c16;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .price-info {
    .price-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .price-value {
      font-size: 32rpx;
      font-weight: 600;
      color: #ff4d4f;
      
      &.free {
        color: #52c41a;
      }
    }
  }
  
  .submit-btn {
    padding: 20rpx 60rpx;
    background-color: #fa8c16;
    border-radius: 40rpx;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #d46b08;
    }
    
    .btn-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>
